<template>
    <div class="w-full h-full flex justify-center ">
        <div class="w-[50%]">
            <ElCard class="h-full">
                <template #header>
                    <p class="text-center font-bold text-2xl">个人设置</p>
                </template>
                <div class="flex flex-col gap-4 items-center justify-center">
                    <ElForm ref="ruleFormRef" label-width="auto" label-position="right" :model="form" :rules="rules">
                        <ElFormItem prop="userName" label="用户名">
                            <ElInput placeholder="请输入用户名" v-model="form.userName"></ElInput>
                        </ElFormItem>
                        <ElFormItem prop="oldPassword" label="旧密码">
                            <ElInput show-password placeholder="请输入旧密码" v-model="form.oldPassword"></ElInput>
                        </ElFormItem>
                        <ElFormItem prop="password" label="新密码">
                            <ElInput show-password placeholder="请输入新密码" v-model="form.password"></ElInput>
                        </ElFormItem>
                        <ElFormItem prop="rePassword" label="确认新密码">
                            <ElInput show-password placeholder="请输入确认新密码" v-model="form.rePassword"></ElInput>
                        </ElFormItem>
                        <ElFormItem prop="avatar" label="头像">
                            <UploadImg ref="uploadImg" v-model="form.avatar"></UploadImg>
                        </ElFormItem>
                    </ElForm>
                    <ElButton @click="submit" type="primary" class="w-[25%]">保存</ElButton>
                </div>
            </ElCard>
        </div>
    </div>
</template>

<script setup lang='ts' name=''>
import { updatePassword, updateUserInfo } from '@/api/function';
import UploadImg from '@/components/UploadImg.vue';
import { ElCard, ElForm, ElFormItem, ElButton, ElInput, ElMessage } from 'element-plus';
import { ref } from 'vue'
const uploadImg = ref();
const ruleFormRef = ref();
const form = ref({
    userName: '',
    oldPassword: '',
    password: '',
    rePassword: '',
    avatar: '',
    avatarUrl: ''
});
const rules = ref({
    userName: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 1, max: 18, message: '用户名长度应在1-18位之间', trigger: 'blur' },
    ],
    oldPassword: [
        { required: true, message: '请输入旧密码', trigger: 'blur' },
        { min: 6, max: 18, message: '旧密码长度应在6-18位之间', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 18, message: '密码长度应在6-18位之间', trigger: 'blur' },
    ],
    rePassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        { min: 6, max: 18, message: '密码长度应在6-18位之间', trigger: 'blur' },
    ],
    avatar: [
        { required: true, message: '请上传头像', trigger: 'change' },
    ]
})
form.value.avatar = localStorage.getItem('avatar') || ''
form.value.userName = localStorage.getItem('username') || ''
async function submit() {
    ruleFormRef.value.validate().then(async () => {
        /** 判断密码 */
        if (form.value.password != '' && form.value.password != form.value.rePassword) {
            ElMessage.error('两次密码不一致')
            return
        }
        /** 判断头像 */
        console.log(form.value.avatar == localStorage.getItem('avatar'))
        if (form.value.avatar != localStorage.getItem('avatar')) {
            form.value.avatar = await uploadImg.value.uploadImg()
        }

        const pwdRes:any = await updatePassword({
            password: form.value.oldPassword,
            xgPassword: form.value.password
        })
        if (pwdRes.code != 200) {
            return
        }

        const infoRes:any = await updateUserInfo({
            name: form.value.userName,
            avatar: form.value.avatar
        })
        if (infoRes.code == 200) {
            ElMessage.success('修改成功')
            localStorage.setItem('username', form.value.userName)
            localStorage.setItem('avatar', form.value.avatar)
            window.location.reload()
        }
    })


}
</script>

<style scoped></style>